/**
 * @title 委外投资指令
 * @author LT
 * @date 2022-02-07
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { FirstHeaderC, AvailableAssetC, TradeHoldC } from '../../../../comps';
import AddOrder from './addOrder';
import OutSourcingInfo from './outSourcingInfo';
import style from './index.less';

@connect(({ userM: user, loading }) => ({
  user,
  loading,
}))
export default class OutSourcingOrder extends Component {
  static defaultProps = {
    onCancel: () => {},
    onOk: () => {},
  };
  constructor(props) {
    super(props);
    this.state = {
      money: {}, // 资金
      position: {}, // 持仓数量
      portfolio: undefined, // 当前组合
      tradingcode: undefined, // 当前证券代码
      dateInterval: {}, // 证券日期区间
    };
  }

  //组合变更id 切换
  portfolioOnChange = (e) => {
    if (this.state.portfolio !== e) {
      //组合id不同则变更当前页面组合id
      this.setState({
        portfolio: e,
      });
    }
  };
  //证券代码变更
  tradingcodeOnChange = (e) => {
    if (this.state.tradingcode !== e) {
      //证券代码不同则变更当前页面证券代码
      this.setState({
        tradingcode: e,
      });
    }
  };
  //新建指令和簿记成功之后调用
  onOk = () => {
    const { type } = this.props;
    if (type == 2 || type == 11) {
      //簿记页面
      this.props.onOk();
    }
  };
  //点击取消按钮
  onCancel = () => {
    const { type } = this.props;
    if (type == 2 || type == 11) {
      // 簿记页面
      this.props.onCancel();
    }
  };

  render() {
    const { portfolio, tradingcode } = this.state;
    return (
      <div className={style.back}>
        <div>
          <OutSourcingInfo
            tradingId={tradingcode?.secucode}
            onChange={(e) => {
              this.setState({
                dateInterval: { ...e },
              });
            }}
          />
        </div>
        <div>
          <div style={{ marginBottom: '16px' }}>
            <AvailableAssetC
              portfolio={portfolio}
              onChange={(e) => {
                this.setState({
                  money: { ...e },
                });
              }}
            />
          </div>
          <div style={{ marginBottom: '16px' }}>
            <TradeHoldC
              securityType={'21'} //委外投资
              portfolio={portfolio}
              tradingcode={tradingcode?.tradingCode}
              exchangecode={tradingcode?.exchangeCode}
              onChange={(e) => {
                this.setState({
                  position: { ...e },
                });
              }}
            />
          </div>
          <FirstHeaderC title='交易要素' />
          <AddOrder
            type={this.props.type}
            portfolioOnChange={this.portfolioOnChange}
            tradingcodeOnChange={this.tradingcodeOnChange}
            onRef={(ref) => {
              this.addOrder = ref;
            }}
            onOk={this.onOk}
            onCancel={this.onCancel}
            money={this.state.money}
            position={this.state.position}
            dateInterval={this.state.dateInterval}
            lotSize={this.state.lotSize}
            optionTickSize={this.state.optionTickSize}
            isStop={this.state.isStop}
          />
        </div>
      </div>
    );
  }
}
